<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: lightblue;
    }

    .fishbox {
      width: 200px;
      height: 200px;
      /*background-color: rgba(0,0,0,0.4);*/
      position: absolute;
      left: 0;
      top: 0;
      animation: run 20s linear infinite;
      animation-direction: normal;
    }

    .fish {
      width: 174px;
      height: 126px;
      position: absolute;
      left: 35%;
      top: 0;
      background: url(image/fish8.png) no-repeat left top;
      /*transition:all 0.8s steps(8) ;*/
      animation: active1 0.8s steps(8) infinite;

    }

    .sharkbox {
      width: 509px;
      height: 270px;
      animation: run2 20s linear infinite;
    }

    .shark {
      width: 509px;
      height: 270px;
      background: url(image/shark1.png) no-repeat;
      animation: active2 1s steps(8) infinite;
    }

    @keyframes active1 {
      0% {

      }
      100% {
        background-position: left -1008px;
      }
    }

    @keyframes active2 {
      0% {

      }
      100% {
        background-position: left -2160px;
      }
    }

    @keyframes run {
      0% {

      }

      15% {
        transform: translate(600px, 0px) rotate(45deg);
      }

      50% {
        transform: translate(600px, 350px) rotate(135deg);
      }

      75% {
        transform: translate(50px, 300px) rotate(235deg);
      }

      100% {
        transform: translate(0px, 0px) rotate(360deg);
      }
    }

    @keyframes run2 {
      0% {
        transform: translateX(-600px);
      }

      100% {
        transform: translateX(2000px);
      }
    }
  </style>
</head>
<body>
<div class="fishbox">
  <div class="fish"></div>
</div>
<div class="sharkbox">
  <div class="shark"></div>
</div>


</body>
</html>